<template>
  <basic-container>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期">
        <template slot-scope="scope">
          <span>{{scope}}</span>
<!--          <el-date-picker-->
<!--              v-model="row.date"-->
<!--              v-if="row.id==editId"-->
<!--              value-format='yyyy-MM-dd'-->
<!--              type="date"-->
<!--              placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--          <span v-else>{{ row.date }}</span>-->
        </template>
      </el-table-column>


    </el-table>

  </basic-container>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      editData: [],  //编辑行初始数据
      editId: '',  //判断编辑的是哪一行
      tableData: [{
        id: '1',
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: '2',
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        id: '3',
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        id: '4',
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }, methods: {
    delClick(row) {
      //删除接口 成功以后 this.editId = ''
    },
    cancelClick(row) {
      if (row.id) {
        for (let i in row) {
          row[i] = this.editData[i]
        }
        this.editId = ''
      } else {
        this.tableData.forEach((item, index) => {
          if (item.id == '') {
            this.tableData.splice(index, 1)
          }
        })
      }
    },
    saveClick(row) {
      //保存接口 成功以后 this.editId = ''
    },
    changeClick(row) {
      if (this.tableData.some((item) => {
        return item.id == ''
      })) {
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      this.editData = JSON.parse(JSON.stringify(row))    //把当前行数据存一份，取消的时候行数据还原
      this.editId = row.id
    },
    handleClick(row) {
      console.log(row);
    },
    add() {
      if (this.editId != '') {
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      if (this.tableData.some((item) => {
        return item.id == ''
      })) {
        this.$message({
          message: '请先保存',
          type: 'warning'
        });
        return
      }
      this.tableData.push(
          {
            date: '',
            name: '',
            province: '',
            city: '',
            address: '',
            zip: '',
            id: '',
          }
      )
    }
  }
}


</script>
